<template>
    <div class="styleSetting">
        <el-form :model="settingForm" ref="settingForm" label-width="55px" label-position="left">        
            <el-form-item
                v-for="(domain, index) in settingForm.domains"
                :label="'内容'"
                :key="domain.key"
                :prop="'domains.' + index + '.content'">
                <el-input v-model="domain.content" style="width:100px;margin: 0px 10px 0px 0px;" v-show="!domain.isSource && !domain.isEnter|| domain.include"></el-input>
                <el-select v-model="domain.fieldId" :disabled = "domain.include" placeholder="请选择" v-show="domain.isSource && !domain.isEnter " @change="selectSourceTitle(domain,domain.fieldId)" style="width:100px;margin-right:10px;"> <!--&& toChildData.type == 2-->
                    <el-option
                    v-for="item in fields"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>                                
                <el-checkbox v-model="domain.isSource" :disabled = "domain.include" v-if="!domain.isEnter " style="margin-right: 10px;">是否数据源</el-checkbox><!--&& toChildData.type == 2-->
                <el-checkbox v-model="domain.isShowData" v-if="domain.isSource " style="margin-right: 10px;">显示数据</el-checkbox><!--&& toChildData.type == 2-->  
                <el-checkbox v-model="domain.isEnter" v-if="!domain.isSource" style="margin-right: 10px;">换行</el-checkbox>                
                <el-select v-model="domain.fontId" placeholder="请选择" @change="addStyleSheet(domain.fontId,index)" style="width:105px;margin-right:5px;">
                    <el-option
                    v-for="item in fontOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-tooltip class="item" effect="dark" content="字体大小" placement="bottom">
                    <el-input-number v-model="domain.fontSize" :min="12" :max="90" style="width:95px;margin-right:5px;"></el-input-number> 
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="字体颜色" placement="bottom">
                    <el-color-picker
                    v-model="domain.fontColor"
                    style="margin-right:5px;">
                    </el-color-picker>
                 </el-tooltip>
                <el-tooltip class="item" effect="dark" content="背景颜色" placement="bottom">
                    <el-color-picker
                    v-model="domain.backgroundColor"
                    style="margin-right:5px;">
                    </el-color-picker> 
                </el-tooltip>
                <div class="buttonGroup">
                    <el-tooltip class="item" effect="dark" content="加粗" placement="bottom"> 
                        <a class="info" @click="domain.isBold = !domain.isBold">
                            <span class="iconfont ss-font-weight" :class="{'active': domain.isBold}"></span>
                        </a>
                    </el-tooltip>    
                    <el-tooltip class="item" effect="dark" content="倾斜" placement="bottom">
                        <a class="info" @click="domain.isItalic = !domain.isItalic">
                            <span class="iconfont ss-qingxie" :class="{'active': domain.isItalic}"></span>
                        </a>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="下划线" placement="bottom">
                        <a class="info" @click="domain.isUnderline = !domain.isUnderline">
                            <span class="iconfont ss-xiahuaxian" :class="{'active': domain.isUnderline}"></span>
                        </a>
                    </el-tooltip>
                </div>           
                <label v-if="settingForm.type==2" style="color: rgb(96, 98, 102);margin-right:5px;">3D字体</label>
                <el-switch v-model="domain.isThreeD" v-if="settingForm.type==2" style="margin-right:5px;"></el-switch>                 
                <el-button @click.prevent="removeDomain(domain)" round>删除</el-button>
            </el-form-item>          
            <el-form-item style="text-align:right;">                
                <!-- <el-button @click="perview">预览</el-button>                        -->
                <el-button type="primary" @click.stop="submitForm('settingForm')" round>保存</el-button> 
                <el-button @click="addDomain" round>新增内容</el-button>                  
            </el-form-item>                  
        </el-form>
        <div class="modal-preview">
            <div class="preview-box" v-if="!settingForm.previewHtml">
                <span class="preview-placeholder" >预览区域</span>
            </div>
            <div class="preview-box" v-else-if="settingForm.previewHtml" v-html="settingForm.previewHtml">
                <span :style="{}">{{settingForm.previewHtml}}</span>
            </div>
        </div>          
    </div>
</template>

<script>
    import fonts from '@/utils/fonts';
    // import conf from '../../../../../utils/dataSourceConfig';
    import $ from 'jquery'
    export default {
        name: 'styleSetting',
        props: ["toChildData"],
        data() {
            return {
                fontOptions: fonts,  //字体
                // conf:conf,
                fields: [],
                settingForm: {
                    domains: [],
                    previewHtml:'', //输入的内容
                    realContent:''
                },                
            }
        },
        mounted() {
            let fatherData = $.extend(true, {}, this.toChildData),ff;    
            if(fatherData.fields && fatherData.fields.length>0){ //编辑时赋值
                ff = fatherData.fields.find((ff,index)=>{
                    return ff.id === fatherData.fieldsFlag
                })
                this.fields.push(ff);
            }
            if(fatherData.domains && fatherData.domains.length>0){ //编辑时赋值
                this.settingForm.domains = fatherData.domains;
            }            
            this.settingForm.type = fatherData.type;
            this.settingForm.index = fatherData.id;
        },
        methods: {
            removeDomain(item) {
                var index = this.settingForm.domains.indexOf(item)
                if (index !== -1) {
                    this.settingForm.domains.splice(index, 1)
                }
            },
            addDomain() { 
                var include = false;  
                if(this.settingForm.domains.length>0){                       
                    include = this.settingForm.domains.some((doma,index)=>{
                        if(doma.fieldId){
                            return true;
                        }else{
                            return false;
                        }
                    })
                }             
                this.settingForm.domains.push({
                    isEnter: false,
                    include: include,
                    fontFamily: '微软雅黑',
                    fontColor: '#f6d320',
                    fontId: 60,
                    isBold: true,
                    isItalic: false,
                    isUnderline: false,
                    fontSize: 16,
                    content: '',
                    key: Date.now(),                    
                });
            },
            selectSourceTitle(item, fieldId){
                let result = this.fields.find(item => {                
                    return item.id === fieldId;
                });                
                item.content = result.name;
                item.index = fieldId;
            },
            perview(){  //预览内容
                let perviewContent = this.settingForm.domains,html = "", realContent = "";
                // console.info(perviewContent,"预览内容");
                this.settingForm.previewHtml = "";
                perviewContent.forEach((item, i) => {
                    console.info("数据源");
                    let cssString,          // 保存样式字符串
                        result = "",        // 用于pc端预览显示的html字符串
                        realResult = "";    // 用于提交到后台移动端解析的字符串
                    if(item.content){
                        let fontFamily = item.fontFamily ?　item.fontFamily.fontFamily: '';
                        cssString = `style=${fontFamily?("font-family:"+fontFamily):""};${item.fontSize?("font-size:"+item.fontSize + "px"):""};${item.fontColor?("color:"+item.fontColor):""};${item.backgroundColor?("background-color:"+item.backgroundColor):""};${item.isBold?("font-weight:bold"):""};${item.isItalic?("font-style:italic"):""};${item.isUnderline?("text-decoration:underline"):""};`                        
                        // 空格替换
                        result = `<span ${cssString}>${item.content.replace(/ /g, '&nbsp;')}</span>`;
                        realResult = `<span ${cssString}>${item.content}</span>`;
                        // 实际保存的content必须加上'$1$1'等字符
                        if (item.isSource) {
                            realResult = `$${item.index}$${realResult}$${item.index}$`;
                            if (item.isShowData) {
                                result = `<span ${cssString}>${item.index}</span>`;
                            }
                        }   
                        html += result;
                        realContent += realResult;                          
                        // this.addStyleSheet(item.fontFamily.id, i)                        
                    }else if(item.isEnter){
                        html += "<br/>";
                        realContent += "<br/>";
                    }                    
                })
                this.settingForm.previewHtml = html;
                this.settingForm.realContent = realContent;
            },          
            // 添加字体css
            addStyleSheet(fontId,index) {
                let result = this.fontOptions.find(item => {                    
                    return item.id === fontId;
                });
                this.settingForm.domains[index].fontFamily = result;
                let fileHost = "";
                // this.conf.fontList.find(f => {                    
                //     return f.id === fontId
                // });
                if(!fileHost) return;
                console.info(result,this.fontOptions);                         
                let cssString = "@font-face{font-family:" + this.settingForm.domains[index].fontFamily.fontFamily + ";src: url(" + fileHost.name + ");}";
                let b = document.getElementsByTagName("style")[0],
                    c = document.createTextNode(cssString);
                b.appendChild(c)                
            },            
            submitForm(formName) {  //提交录入内容样式
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.info(this.settingForm);
                        this.$emit("sendiptVal", this.submitResult) 
                        this.settingForm.domains = [];
                        this.settingForm.previewHtml = '';
                        this.settingForm.realContent = '';
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }                       
        },
        computed: {
            continueInfoNew() {
                let newR = $.extend(true, [], this.settingForm.domains)                
                return newR;
            },
            submitResult(){
                let result = $.extend(true, {}, this.settingForm)                
                return result;                
            }
        },
        watch: {
            continueInfoNew:{ 
                handler(curVal,oldVal){
　　　　　　　　　    if(curVal != oldVal){
                        this.perview();   
                    }
    　　　　　　　},
                deep:true   
            }
        }
    }
</script>

<style scoped lang="scss">
    .styleSetting{
        margin-top:13px;
    
        .el-color-picker{
            top: 7px;
            display: inline-flex;
        }
        .el-form-item--small .el-form-item__label{
            line-height: 40px;
        }
        .el-form-item__error{
            left: 15px;
        }
        .modal-preview {
            padding-bottom: 20px;
        }
        .modal-preview .preview-box {
            width: 100%;
            min-height: 60px;
            padding: 20px 0;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: center;
            background-color: #f5f5f5;  
            margin-bottom: 15px;
        }
        .preview-box .preview-placeholder {
            display: inline-block;
            font-size: 14px;
        } 
        .active{
            font-weight: 800;
        }
        .info{
            display: inline-block;
            padding: 0px 10px;
            white-space: nowrap;
            cursor: pointer;
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
            text-align: center;
            margin-right: -4px;
            border-right: solid 1px #b3d8ff;   
            line-height: 32px;     
        }
        .info:last-child{
            border-right: none; 
        }
        .buttonGroup{
            margin-right:14px;
            display: inline-block;
            position: relative;
            top: 2px;
        }
        .el-form-item--small .el-form-item__content{
            line-height: 40px;
            height: 40px
        } 
        .el-checkbox__label{
            font-size: 12px;
        }  
    }
</style>